import { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
/*
 * @Author: hongbin
 * @Date: 2022-09-22 12:41:03
 * @LastEditors: hongbin
 * @LastEditTime: 2022-10-19 18:54:22
 * @Description:加载模型
 */
import * as THREE from "three";
import { loadGltf } from "../helper/loaderHelper";
import { vagueMaterial } from "../helper/vagueMaterial";

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";

export function UnrealBloom(
    scene: THREE.Scene,
    camera: THREE.Camera,
    renderer: THREE.WebGLRenderer
) {
    const renderPass = new RenderPass(scene, camera);
    const composer = new EffectComposer(renderer);
    /**
     * UnrealBloomPass的参数
     * 1:辉光所覆盖的场景大小
     * 2：辉光的强度
     * 3：辉光散发的半径
     * 4：辉光的阈值（场景中的光强大于该值就会产生辉光效果）
     */
    const unrealBloomPass = new UnrealBloomPass(
        new THREE.Vector2(window.innerWidth, window.innerHeight),
        1,
        1,
        0.9
    );
    unrealBloomPass.renderToScreen = true;
    composer.addPass(renderPass);
    composer.addPass(unrealBloomPass);
    return composer;
}
/**
 * 加载模型
 */
export const loadModel = (scene: THREE.Scene, onComplete?: (gltf?: GLTF) => void) => {
    loadGltf("model/aboutMe.glb").then((gltf) => {
        const root = gltf.scene;
        scene.add(root);
        console.log(root);

        const groove = root.getObjectByName("血管槽") as THREE.Mesh;

        groove.material = vagueMaterial();
        const contentPlate = root.getObjectByName("内容背板") as THREE.Mesh;

        contentPlate.material = vagueMaterial({
            color: 0x051233,
            transmission: 0.9,
            ior: 1.52,
            roughness: 0.3,
            metalness: 0.2,
        });
        // new THREE.MeshPhysicalMaterial({
        //     side: THREE.DoubleSide,
        //     transparent: true,
        //     opacity: 0.4,
        //     color: 0x5511ff,
        //     flatShading: true,
        //     transmission: 0.7329381879762913,
        //     metalness: 0.9063505503810331,
        //     roughness: 0.5812023708721422,
        //     ior: 1.209822184589331,
        //     specularIntensity: 1.0364098221845894,
        // });
        window.render();
        onComplete && onComplete(gltf);
    });
};
